import React from 'react';
import './footer.scss';
import config from '@/config';
import { Link } from 'react-router-dom';

const Footer = () => {
  const list = [
    {
      title: '品质保证',
      footer: '品质护航 购物无忧',
      url: <img className="tabs-img" src="../src/assets/bz1.jpg" />,
    },
    {
      title: '特色服务体验',
      footer: '为您呈现不一样的服务',
      url: <img className="tabs-img" src="../src/assets/bz3.jpg" />,
    },
    {
      title: '帮助中心',
      footer: '您的说明指南',
      url: <img className="tabs-img" src="../src/assets/bz4.jpg" />,
    },
  ];

  return (
    <>
      <div className="tabs">
        <div className="tab-item">
          {list.map((val, index) =>
            index == 2 ? (
              <Link to="/zhishi" className="item" key={index + 'footer'}>
                {/*<img src="../src/assets/bz1.jpg" alt=""/>*/}
                {val.url}
                <div className="text">
                  <div>{val.title}</div>
                  <div>{val.footer}</div>
                </div>
              </Link>
            ) : (
              <div className="item" key={index + 'footer'}>
                {/*<img src="../src/assets/bz1.jpg" alt=""/>*/}
                {val.url}
                <div className="text">
                  <div>{val.title}</div>
                  <div>{val.footer}</div>
                </div>
              </div>
            )
          )}
        </div>
      </div>
      <div className="footer" >
        <span style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{config.footer}<img style={{width:'20px'}} src={config.img}></img>{config.imgFooter}</span>
      </div>
    </>
  );
};

export default Footer;
